<template>
  <view class="personal">
    <view class="avatar">
      <image :src="personal.avatar" mode=""></image>
      <view class="avatar_change" v-show="isEdit" @click="show = true">
        <uni-icons type="camera-filled" size="25" color="#a1a1a1"></uni-icons>
      </view>
    </view>
    <view class="personal_info">
      <p class="name common" v-for="item in personal.userinfo" :key="item.key" @click="editInfo">
        <view>
          {{item.key}}：<span>{{item.value}}</span>
        </view>
        <uni-icons type="compose" size="30" v-show="isEdit" :data-tag="item.key"></uni-icons>
      </p>
    </view>
    <!-- 修改头像底部弹出框 -->
    <view v-if="isEdit">
      <u-action-sheet :actions="changeAvatar.list" :title="changeAvatar.title" :show="avatarShow" cancelText="取消"
        @close="closeSheet" @select="selectClick"></u-action-sheet>
    </view>
    <!-- 修改头像底部弹出框 -->

    <!-- 修改用户名 -->
    <u-popup :show="nameShow" @close="nameSheetClose" :round="10">
      <view class="editName">
        <u--input placeholder="请输入内容" border="surround" v-model="personal.userinfo[0].value" class="name_input">
        </u--input>
        <view class="nameEidtConfirme" @click="nameEidtConfirme">
          完成
        </view>
      </view>
    </u-popup>
    <!-- 修改用户名 -->

    <!-- 修改性别弹出框 -->
    <u-picker :show="sexShow" :columns="sexCloums" title="选择年龄" @cancel="sexCloseSheet2" @confirm="sexConfirmSheet2"
      closeOnClickOverlay="true" @close="sexCloseSheet2" :defaultIndex="[2]"></u-picker>
    <!-- 修改性别弹出框 -->

    <!-- 修改年龄底部弹出框 -->
    <u-picker :show="ageShow" :columns="ageColumns" title="选择年龄" @cancel="ageCloseSheet2" @confirm="ageConfirmSheet2"
      closeOnClickOverlay="true" @close="ageCloseSheet2" :defaultIndex="[5]"></u-picker>
    <!-- 修改年龄底部弹出框 -->

    <!-- 修改学校弹出框 -->
    <u-picker :show="schoolShow" ref="uPicker" :columns="schoolCloums.columns" @confirm="schoolConfirm" @change="schoolChangeHandler"></u-picker>
    <!-- 修改学校弹出框 -->

    <!-- 按钮 -->
    <button type="primary" class="changeinfo" @click="changeInfo" v-if="!isEdit">修改个人信息</button>
    <button type="primary" class="commit" @click="commit" v-if="isEdit">提交</button>

  </view>
</template>

<script>
  import {closeSheet,
        editInfo,
        sexCloseSheet2,
        sexConfirmSheet2,
        ageCloseSheet2,
        ageConfirmSheet2,
        nameSheetClose,
        nameEidtConfirme,
        selectClick,
        schoolChangeHandler,
        schoolConfirm,
        changeInfo,
        commit} from '@/utils/personal.js'
  export default {
    data() {
      return {
        changeAvatar: {
          title: '修改头像',
          list: [{
              name: '相机',
              color: '#414141',
              fontSize: '15'
            },
            {
              name: '从本地获取',
              color: '#414141',
              fontSize: '15'
            },
          ],
        },
        personal: {
          avatar: 'http://120.46.150.252:10004/static/images/teacher1.png',
          userinfo: [{
              key: 'NAME',
              value: '梓枫',
            },
            {
              key: 'SEX',
              value: '男',
            },
            {
              key: 'AGE',
              value: '22',
            },
            {
              key: 'SCHOOL',
              value: '麻省理工',
            }
          ]
        },
        ageColumns: [
          [17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40]
        ],
        sexCloums: [
          ['男', '女', '保密']
        ],
        schoolCloums: {
          columns: [
            ['重庆', '四川'],
            ['重庆大学', '西南大学', '重庆邮电大学', '重庆交通大学','西南农业大学']
          ],
          columnData: [
            ['重庆大学', '西南大学', '重庆邮电大学', '重庆交通大学','西南农业大学'],
            ['电子科技大学', '四川大学', '西南交通大学', '四川农业大学','西南财经大学']
          ]
        },
        avatarShow: false,
        sexShow: false,
        nameShow: false,
        ageShow: false,
        schoolShow: false,
        // 是否处于编辑状态
        isEdit: false,
      };
    },
    methods: {
      // 修改头像
      closeSheet(){
        return closeSheet(this)
      },
      // 修改信息
      editInfo(e){
        return editInfo({_this:this,data:e.target.dataset.tag})
      },
      // 性别弹出相关回调
      sexCloseSheet2() {
        return sexCloseSheet2(this)
      },
      sexConfirmSheet2() {
        return sexConfirmSheet2(this)
      },
      // 性别弹出相关回调

      // 年龄弹出框相关回调
      ageCloseSheet2() {
        return ageCloseSheet2(this)
      },
      ageConfirmSheet2() {
        return ageConfirmSheet2(this)
      },
      // 年龄弹出框相关回调

      // 修改用户名的弹出框事件
      nameSheetClose() {
        return nameSheetClose(this)
      },
      nameEidtConfirme() {
        return nameEidtConfirme(this)
      },
      // 选择弹出框的回调
      selectClick(index) {
        return selectClick(index)
      },
      // 修改学校弹出框的回调
      schoolChangeHandler(e) {
        return schoolChangeHandler({_this:this,data:e})
      },
      // 回调参数为包含columnIndex、value、values
      schoolConfirm(e) {
        return schoolConfirm({_this:this,data:e})
      },
      
      // 修改个人信息按钮
      changeInfo() {
        return changeInfo(this)
      },
      // 提交按钮
      commit() {
        return commit(this)
      }
    },
    onLoad(option) {
      if(Object.keys(option).length !== 0) {
        this.isEdit = option.isEdit
      }
    }
  }
</script>

<style lang="less">
  page {
    background-color: #fff;
  }

  .personal {
    .avatar {
      width: 100%;
      height: 300rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      box-shadow: 2rpx 2rpx 2rpx 2rpx #e2e2e2;
      border-end-start-radius: 30rpx;
      border-end-end-radius: 30rpx;

      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
      }

      .avatar_change {
        margin-top: 10rpx;
        width: 100rpx;
        height: 50rpx;
        text-align: center;
        line-height: 50rpx;
        background-color: #ebebeb;
        box-shadow: 2rpx 2rpx 2rpx 2rpx #e2e2e2;
      }
    }

    .personal_info {
      padding: 0 20rpx;

      .common {
        display: flex;
        justify-content: space-between;
        padding: 0 20rpx;
        margin-top: 30rpx;
        height: 100rpx;
        line-height: 100rpx;
        border-radius: 30rpx;
        background-color: #fff;
        box-shadow: 2rpx 2rpx 2rpx 2rpx #e2e2e2;
        border-end-end-radius: 30rpx;
        border-end-start-radius: 30rpx;
      }
    }

    .changeinfo {
      margin: 20rpx 20rpx;
      border-radius: 30rpx;
    }

    .commit {
      margin: 20rpx 20rpx;
      border-radius: 30rpx;
      background-color: #55aaff;
    }

    // 修改用户名的弹出框样式
    .editName {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      height: 100rpx;
    }
  }
</style>
